<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情 | 个人博客</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/article.css">
    <link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <i class="fas fa-blog"></i>
                <span>CodeJourney</span>
            </div>
            
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#">前端技术</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">数据结构</a></li>
                    <li><a href="#">生活感悟</a></li>
                    <li><a href="#">关于我</a></li>
                </ul>
            </nav>
            
            <div class="header-actions">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索文章...">
                </div>
                <button class="theme-toggle" id="themeToggle">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 文章详情页 -->
    <div id="articleDetailPage">
        <div class="container">
            <div class="main-content">
                <div class="articles">
                    <div class="article-detail" id="articleDetail">
                        <!-- 文章详情将通过JS动态生成 -->
                    </div>
                </div>
                
                <aside class="sidebar">
                    <!-- 关于我 -->
                    <div class="sidebar-widget about-widget">
                        <h3 class="widget-title">关于博主</h3>
                        <p>全栈开发工程师，热爱技术分享，专注于Web开发领域。喜欢探索新技术，解决复杂问题。</p>
                        <a href="#" class="btn" style="margin-top: 1rem;">了解更多</a>
                    </div>
                    
                    <!-- 分类 -->
                    <div class="sidebar-widget categories">
                        <h3 class="widget-title">文章分类</h3>
                        <ul id="categoriesList">
                            <!-- 分类将通过JS动态生成 -->
                        </ul>
                    </div>
                    
                    <!-- 热门文章 -->
                    <div class="sidebar-widget popular-posts">
                        <h3 class="widget-title">热门文章</h3>
                        <div id="popularPosts">
                            <!-- 热门文章将通过JS动态生成 -->
                        </div>
                    </div>
                    
                    <!-- 标签云 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">标签云</h3>
                        <div class="tag-cloud" id="tagCloud">
                            <!-- 标签将通过JS动态生成 -->
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-widget">
                    <h3>关于博客</h3>
                    <p>CodeJourney是一个专注于技术分享的个人博客，记录学习编程过程中的心得与解决方案。</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-widget">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="#">关于我</a></li>
                        <li><a href="#">项目作品</a></li>
                        <li><a href="#">技术文章</a></li>
                        <li><a href="#">联系我</a></li>
                    </ul>
                </div>
                
                <div class="footer-widget">
                    <h3>分类导航</h3>
                    <ul class="footer-links">
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">React教程</a></li>
                        <li><a href="#">Node.js</a></li>
                        <li><a href="#">数据库</a></li>
                        <li><a href="#">算法与数据结构</a></li>
                    </ul>
                </div>
                
                <div class="footer-widget">
                    <h3>订阅更新</h3>
                    <p>订阅我的博客，获取最新技术文章和教程更新</p>
                    <form>
                        <div class="search-container" style="width: 100%; margin-top: 1rem;">
                            <input type="email" placeholder="输入您的邮箱">
                            <button class="btn" style="position: absolute; right: 5px; top: 5px; padding: 0.3rem 1rem;">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="copyright">
                &copy; 2023 CodeJourney 个人博客 | 设计与开发 by 技术爱好者
            </div>
        </div>
    </footer>

    <script  type="module" src="js/api.js"></script>
    <script   type="module" src="js/article.js"></script>
</body>
</html>